<template>
  <div class="budgetAmountWarningPage">
    <el-card shadow="never" class="d-flex flex-column">
      <div class="title-box d-flex j-center">
        <common-title title-name="资金预算预警金额设置"/>
      </div>
      <div class="content-box d-flex">
          <el-form
                  ref="ruleFormRef"
                  :model="form"
                  :rules="rules"
                  class="d-flex j-sb px-50"
          >
                <div class="left-box d-flex flex-column">
                    <div class="form-item d-flex a-center m-b20">
                        <label class="m-r10">开启资金预算超金额预算</label>
                        <el-switch v-model="form.limitRuleStatus" active-color="#fe8740" :active-value="1" :inactive-value="-1" ></el-switch>
                    </div>
                    <div class="form-item d-flex a-center m-b20">
                        <label>已使用额度达到总额度的</label>
                        <el-form-item class="m-l10 m-r10" prop="limitRate">
                            <el-input
                                    v-model="form.limitRate"
                                    placeholder="百分比"
                                    @input="form.limitRate = limitInputNum(form.limitRate,3,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>开始提醒</label>
                    </div>
                    <div class="form-item d-flex a-center m-b20">
                        <label>每</label>
                        <el-form-item class="m-l10 m-r10" prop="dayCount">
                            <el-input
                                    v-model="form.dayCount"
                                    placeholder="/天"
                                    @input="form.dayCount = limitInputNum(form.dayCount,4,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>天，提醒</label>
                        <el-form-item class="m-l10 m-r10" prop="times">
                            <el-input
                                    v-model="form.times"
                                    placeholder="/次"
                                    @input="form.times = limitInputNum(form.times,4,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>次</label>
                    </div>
                    <el-form-item class="m-l10 m-r10" prop="limitRuleRemark">
                        <el-input
                                v-model="form.limitRuleRemark"
                                :rows="8"
                                type="textarea"
                                maxlength="50"
                                show-word-limit
                                placeholder="请输入提示内容（限制50字以内）"
                        />
                    </el-form-item>
                </div>
                <div class="line"></div>
                <div class="right-box  d-flex flex-column">
                    <div class="form-item d-flex a-center m-b20">
                        <label class="m-r10">开启资金预算未达到金额预警</label>
                        <el-switch v-model="form.notUseStatus" active-color="#fe8740" :active-value="1" :inactive-value="-1" ></el-switch>
                    </div>
                    <div class="form-item d-flex a-center m-b20">
                        <label>每季度的第</label>
                        <el-form-item class="m-l10 m-r10" prop="monthCount">
                            <el-input
                                    v-model="form.monthCount"
                                    placeholder="/月"
                                    @input="form.monthCount = limitInputNum(form.monthCount,2,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>个月未使用额度达到</label>
                        <el-form-item class="m-l10 m-r10" prop="notUseRate">
                            <el-input
                                    v-model="form.notUseRate"
                                    placeholder="/%"
                                    @input="form.notUseRate = limitInputNum(form.notUseRate,3,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>开始提醒</label>
                    </div>
                    <div class="form-item d-flex a-center m-b20">
                        <label>每</label>
                        <el-form-item class="m-l10 m-r10" prop="intervalDayCount">
                            <el-input
                                    v-model="form.intervalDayCount"
                                    placeholder="/天"
                                    @input="form.intervalDayCount = limitInputNum(form.intervalDayCount,4,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>天，提醒</label>
                        <el-form-item class="m-l10 m-r10" prop="notUseTimes">
                            <el-input
                                    v-model="form.notUseTimes"
                                    placeholder="/次"
                                    @input="form.notUseTimes = limitInputNum(form.notUseTimes,4,0,false)"
                            ></el-input>
                        </el-form-item>
                        <label>次</label>
                    </div>
                    <el-form-item class="m-l10 m-r10" prop="notUseRemark">
                        <el-input
                                v-model="form.notUseRemark"
                                :rows="8"
                                type="textarea"
                                maxlength="50"
                                show-word-limit
                                placeholder="请输入提示内容（限制50字以内）"
                        />
                    </el-form-item>
                </div>
          </el-form>
      </div>
    </el-card>
    <div class="buttons-box m-t20 d-flex a-center j-center">
        <el-button :loading="loading" class="button_view" @click="onSave">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import {ElCard, ElForm, ElFormItem, ElMessage, ElSwitch} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import {onMounted, reactive, ref} from "vue";
import {fundManagementApi} from "@/api/businessFinance";
import {limitInputNum} from "@/common/utils/GlobalUtils";

const form = reactive({
    ruleId:'',
    limitRate: '',
    dayCount: '',
    times: '',
    limitRuleStatus: 1,
    limitRuleRemark: '',
    monthCount: '',
    notUseRate: '',
    intervalDayCount: '',
    notUseTimes: '',
    notUseStatus: 1,
    notUseRemark: ''
});

const rules = reactive({
    limitRate:[
        { required: true, message: '规则占比不为空!', trigger: 'blur' },
    ],
    dayCount:[
        { required: true, message: '间隔天数不为空!', trigger: 'blur' },
    ],
    times:[
        { required: true, message: '次数不为空!', trigger: 'blur' },
    ],
    limitRuleRemark:[
        { required: true, message: '资金预算超限提醒内容不为空!', trigger: 'blur' },
    ],
    monthCount:[
        { required: true, message: '第几个月', trigger: 'blur' },
    ],
    notUseRate:[
        { required: true, message: '未使用占比不为空!', trigger: 'blur' },
    ],
    intervalDayCount:[
        { required: true, message: '间隔几天', trigger: 'blur' },
    ],
    notUseTimes:[
        { required: true, message: '资金预算未达到金额-次数不为空!', trigger: 'blur' },
    ],
    notUseRemark:[
        { required: true, message: '资金预算未达到金额提醒内容不为空!', trigger: 'blur' },
    ],
});

const getFundBudgetLimitRuleVo = () => {
  fundManagementApi.getFundBudgetLimitRuleVo().then(res=>{
      if(res.code === '200'){
          for(let key in form){
              for (let k in res.data){
                  if(key === k){
                      form[key] = res.data[k];
                  }
              }
          }
      }
  });
}

const loading = ref(false);
const saveFundBudgetLimitRuleVo = (param) => {
  fundManagementApi.saveFundBudgetLimitRuleVo(param).then(res=>{
      if(res.code === '200'){
          loading.value  = false;
          ElMessage.success('操作成功!');
      }
  });
}

const ruleFormRef = ref(null);
const onSave = () => {
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            loading.value  = true;
            saveFundBudgetLimitRuleVo(form);
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    getFundBudgetLimitRuleVo();
});
</script>

<style lang="scss" scoped>
.budgetAmountWarningPage{
  height: 100%;
  .content-box{
    height: 100%;
    .el-form-item{
      margin-bottom: 0px !important;
    }
    .el-form{
      width: 100%;
    }

    .line{
      width: 1px;
      height: 90%;
      background: #E3E7F1;
    }
  }
}
</style>
